<template>
	<view class="container container-bg">
		<!-- 上传配件信息 -->
		<u-form :model="form" :border-bottom="false" ref="uForm" label-width="auto">
			<u-form-item label-width="120" required="true" label="食宿费" prop="worker_cost">
				<u-input v-model="form.worker_cost" placeholder="请输入工人食宿费/单位'元'" />
			</u-form-item>
			<u-form-item label-width="120" required="true" label="钻机运费" prop="drill_freight">
				<u-input v-model="form.drill_freight" placeholder="请输入钻机运费/单位'元'" />
			</u-form-item>
			<u-form-item label-width="120" required="true" label="燃油费" prop="fuel_oil">
				<u-input v-model="form.fuel_oil" placeholder="请输入燃油费/单位'元'" />
			</u-form-item>
			<u-form-item label-width="120" required="true" label="配件费用" prop="parts_cost">
				<u-input v-model="form.parts_cost" placeholder="请输入配件费用/单位'元'" />
			</u-form-item>
			<u-form-item label-width="120" required="true" label="付款方" prop="revenue_company">
				<u-input v-model="form.revenue_company" placeholder="请输入付款方名称" />
			</u-form-item>
			<u-form-item label-width="120" required="true" label="付款方式" prop="revenue_type">
				<u-input v-model="form.revenue_type" placeholder="请选择付款方式" type="select" :select-open="revenueTypeShow" @click="revenueTypeShow = true"/>
				<u-select v-model="revenueTypeShow" :list="revenueTypes" @confirm="revenueTypeConfirm"></u-select>
			</u-form-item>
			<u-form-item label-width="120" label-position="top" required="true" label="购买票据">
				<z-upload @resolveImgs="resolveImgs" @failImgs="failImgs"></z-upload>
				<view class="u-flex u-flex-wrap">
					<view class="imgs u-rela" v-for="(path,index) in form.vouchers" :key="index">
						<image :src="path" class="receiptImg"></image>
						<u-icon class="delete-icon u-abso" @click="closeImg(index)" name="close"></u-icon>
					</view>
				</view>
			</u-form-item>
		</u-form>
		<u-button class='u-margin-20' :disabled="submitBtnDis" type="primary" @click="submit">确认添加</u-button>
	
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import uploadFiles from "@/common/uploadFiles.js";
	import deleteFile from "@/common/deleteFiles.js";
	import {mapState} from "vuex";
	import {myTime} from "@/common/formatTime.js";
	export default {
		data() {
			return {
				projectID:"",
				submitBtnDis:false,
				form: {
					worker_cost: '', //工人食宿费
					drill_freight: "", //钻机运费
					fuel_oil: "", //燃油费
					parts_cost: "", //配件费用
					vouchers: [],
					revenue_company:"",
					revenue_type:"",
					check_status:-1 // 1:通过 0:拒绝 -1:待审核
				},
				revenueTypeShow:false,
				revenueTypes:[
					{
						value: '1',
						label: '银行卡'
					},
					{
						value: '2',
						label: '支付宝'
					},
					{
						value: '3',
						label: '微信'
					}
				],
				rules: {
					worker_cost: [{
						required: true,
						message: "请输入工人食宿费",
						trigger: ['blur', 'change']
					}],
					drill_freight: [{
						required: true,
						message: "请输入钻机运费",
						trigger: ['blur', 'change']
					}],
					fuel_oil: [{
						required: true,
						message: "请输入燃油费",
						trigger: ['blur', 'change']
					}],
					parts_cost: [{
						required: true,
						message: "请输入配件费用",
						trigger: ['blur', 'change']
					}],
					revenue_company: [{
						required: true,
						message: "请输入付款方名称",
						trigger: ['blur', 'change']
					}],
					revenue_type: [{
						required: true,
						message: "选择付款方式",
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		computed:{
			...mapState({
				token:"token"
			})
		},
		onLoad(params) {
			this.projectID = params.projectID;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			revenueTypeConfirm(e){
				this.form.revenue_type = e[0].label;
			},
			async submit(){
				let {token,projectID} = this;
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						if(this.form.vouchers.length <= 0){
							this.$refs.uTips.show({
								title: '请上传凭据',
								type: 'error'
							})
							return false;
						}
						this.form.date = myTime(Date.now());
						this.form.projectID = projectID;
						this.submitBtnDis = true;
						this.$loading("正在保存")
						let res = await this.$network({
							api: "main",
							data:{
								action:"projectAdmin/uploadExpend",
								data:{
									token,
									data:this.form
								}
							}
						});
						uni.hideLoading();
						this.submitBtnDis = false;
						if (res.status === 0) {
							this.form = {
								worker_cost: '', //工人食宿费
								drill_freight: "", //钻机运费
								fuel_oil: "", //燃油费
								parts_cost: "", //配件费用
								vouchers: [],
								revenue_company:"",
								revenue_type:""
							}
							this.$refs.uToast.show({
								title: '保存成功',
								type: 'success'
							})
						}
					}
				})
			},
			//删除票据
			async closeImg(index){
				let fileList = [];
				this.$loading('正在删除')
				fileList.push(this.form.vouchers[index])
				this.form.vouchers.splice(index,1);
				let deleteRes = await deleteFile(fileList);
				uni.hideLoading();
				if(deleteRes){
					this.$refs.uToast.show({
						title: '删除成功',
						type: 'success'
					})
				}
			},
			//保存票据
			async resolveImgs(imgs){
				let uploadRes = await uploadFiles(imgs);
				if(uploadRes.code === 0){
					uploadRes.res.forEach(item=>{
						this.form.vouchers.push(item.fileID);
					})
				}
			},
			failImgs(err){
				this.$refs.uToast.show({
					title: '获取图片失败',
					type: 'error'
				})
			}
		}
	}
</script>

<style lang="scss">
	.imgs{
		width: 160rpx;
		height: 160rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}
	.receiptImg{
		width: 160rpx;
		height: 160rpx;
	}
	.delete-icon{
		top: 30rpx;
		right: 10rpx;
		color: red;
	}
</style>
